<template>
  <div class="county-performance">
    <P class="title">区县指标完成情况</P>
    <div class="county-performance-main">
      <div class="list">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="item-bg">
            <!-- <vue-seamless-scroll :data="item.num" class="warp" :class-option="classOption"> -->
              <div class="item-num" v-for="(jtem,jndex) in item.num" :key="jndex">{{ jtem }}</div>
            <!-- </vue-seamless-scroll> -->
          </div>
          <div class="item-txt">{{ item.txt }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// https://www.vue365.cn/code_demo.php?id=2985
// import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    // vueSeamlessScroll
  },
  props:{
    list:{
      type:Array,
      default:() => {
        return [
          { num:[ 16.8,15.2 ],txt:'95分以上' },
          { num:[ 16.8,15.2,12.3 ],txt:'90-95分' },
          { num:[ 16.8,15.2,14.3,13.2 ],txt:'85-90分' },
        ]
      }
    }
  },
  data(){
    return{
    }
  },
  mounted() {
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length,如果把这一行注释掉就是超出才会滚动
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
@function companyW($num) {
  @return ($num * 100)/1920;
}
@function companyH($num) {
  @return ($num * 100)/1080;
}
@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url('https://srwebapp.oss-cn-beijing.aliyuncs.com/web/fontFamily/YouSheBiaoTiHei-2.ttf');
}
@font-face {
  font-family: 'Alibaba PuHuiTi';
  src: url('https://srwebapp.oss-cn-beijing.aliyuncs.com/web/fontFamily/ALIBABAPUHUITI_2_105_HEAVY.TTF');
}

.county-performance{
  width: companyW(441vw);
  height: companyH(234vh);
  background: url("https://srwebapp.oss-cn-beijing.aliyuncs.com/web/hangzhou-civil-admin-board/good-example/sj-qxzbwcqk-bg.png") no-repeat;
  background-size: 100% 100%;
  .title{
    font-size: companyH(24vh);
    font-family: Alibaba PuHuiTi;
    font-weight: 800;
    font-style: italic;
    color: #FFFFFF;
    background: linear-gradient(0deg, #8BC7FE 0%,#fff 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: companyW(67vw);
    box-sizing: border-box;
    line-height: companyH(45vh);
  }
  .county-performance-main{
    margin: companyH(12vw) companyW(30vw);
    .list{
      display: flex;
      justify-content: space-between;
      .item{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .item-bg{
        width: companyW(96vw);
        height: companyH(116vh);
        background: url('http://srwebapp.oss-cn-beijing.aliyuncs.com/web/hangzhou-civil-admin-board/good-example/county-performance-bg.png') no-repeat;
        background-size: 100% 100%;
        font-size: companyH(18vh);
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #F0F0F0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: companyH(18vh);
        padding-bottom: companyH(12vh);
        box-sizing: border-box;
        .warp{
          overflow: hidden;
        }
        .item-num{
          margin-bottom: companyH(10vh);
          width: companyW(83vw);
          height: companyH(21vh);
          // background-image: linear-gradient(to right,#024194,#0f93f0,#024194);
          background: url('http://srwebapp.oss-cn-beijing.aliyuncs.com/web/hangzhou-civil-admin-board/good-example/performance-item-bg.png') no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: companyH(21vh)
        }
      }
      .item-txt{
        font-size: companyH(12vh);
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        line-height: companyH(21vh);
        width: companyW(96vw);
        text-align: center;
        transform: scale(0.8);
        margin-top: companyH(8vh);
      }
    }
  }
}
</style>
